import React, { useContext, useMemo } from 'react';
import { ConfigProvider } from 'antd';
import { GridContent, WaterMark, RouteContext } from '@ant-design/pro-layout';

export type MyContentProps = {
  children: React.ReactNode;
};

const MyContent: React.FC<MyContentProps> = (props) => {
  const routeCtxVal = useContext(RouteContext);
  const { children } = props;

  // console.log('MyContent.RouteContext: ', RouteContext);
  //console.log('MyContent.routeCtxVal: ', routeCtxVal);

  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('myui');

  const content = useMemo(() => {
    return (
      <GridContent className={`${prefixCls}-content`}>{children}</GridContent>
    );
  }, [children]);

  const renderContentDom = useMemo(() => {
    if (routeCtxVal.waterMarkProps) {
      return <WaterMark {...routeCtxVal.waterMarkProps}>{content}</WaterMark>;
    }
    return content;
  }, [routeCtxVal.waterMarkProps, content]);

  return renderContentDom;
};

export default MyContent;
